<template>
<div>
    <div class="e-table billList">
        <div class="top">
            <div class="left">
                <div class="listTop">
                    <el-button
                        size="small"
                        class="btn-greenYellow"
                        @click="openAddDialog"
                    >
                        新增</el-button>
                    <el-button
                        size="small"
                        class="btn-greenYellow"
                        @click="showDialog"
                    >
                        汇总显示</el-button>
                </div>
            </div>
            <div class="right">
                <div class="right-div1">
                    <el-input
                        placeholder="请输入关键字"
                        size="small"
                        v-model="pagination.keyword"
                        @blur="search"
                    >
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
                    </el-input>
                </div>
                <div>
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click="heightSharch"
                        >高级搜索
                    </el-button>
                </div>
            </div>
        </div>
        <el-table
            ref="table"
            class="table"
            :data="tableData"
            border
            style="width: 100%"
            highlight-current-row
            height="0"
            v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
        >
            <el-table-column label="计划编号" min-width="200" show-overflow-tooltip class-name="blue-column">
             <template slot-scope="{ row }" >
                <span @click="tableDbShow(row)">{{row.billNo}}</span>
            </template>
            </el-table-column>
            <el-table-column
                prop="orgName"
                label="机构"
                min-width="200"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="billDate"
                label="计划日期"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="totalCost"
                label="费用总计（元）"
                align="right"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="state"
                label="状态"
                width="150"
            >
                <template slot-scope="{ row }">
                    <ToolHistory v-if="row.state === 1" :key="$index" url="/facilityplan/flowEngin/get/audit/history" :billId="row.billId" :billType="5012">
                        <span v-status="row.state">{{ statusLable(row.state) }}</span>
                    </ToolHistory>
                    <span v-else v-status="row.state">{{ statusLable(row.state) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="changeState"
                label="变更状态"
                width="150"
                class-name="blue-column"
            >
                <template slot-scope="{ row }">
                    <ToolHistory v-if="row.changeState === 1" :key="$index" url="/facilityplan/flowEngin/get/audit/history" :billId="row.changeBillId" :billType="50121">
                            <span v-if="row.changeState != null" @click="openChangePage(row)" v-status="row.changeState">{{ statusLable(row.changeState) }}</span>
                    </ToolHistory>
                    <span v-else>
                        <span v-if="row.changeState != null" @click="openChangePage(row)" v-status="row.changeState">{{ statusLable(row.changeState) }}</span>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <ComPagination
            :total="totalPage"
            :pageSize.sync="pagination.limit"
            :currentPage.sync="pagination.page"
            @currentChange="listByEntity"
            @sizeChange="listByEntity"
            class="bottomSetting"
        />
    </div>
</div>

</template>

<script>
import { mapMutations } from 'vuex'
import request from '@/api/equip/equipPlan.js'
import ComPagination from '@/components/pagination/pagination.vue'
import { vueDom, debounce, advanceSearch } from '@/utils/common.js'
import { openAppClient } from '@/utils/common'
import requestAudit from '@/api/equip/common.js'
export default {
    data () {
        return {
            tableData: [],
            loading: false,
            MouseEnterId: 0,
            dialogVisibleSearch: false,
            formData: {
                state: 0
            },
            pagination: {
                'endTime': '',
                'founderId': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 0,
                'startTime': '',
                'states': []
            },
            totalPage: 0, //总页数
            tableHeight: 0,
            auditState: {}, //流程按钮显示状态
            auditParams: {
                'billId': '',
                'billType': 5012,  //租赁计划
                'freeNextUnitIndex': null,
                'freeNextUser': '',
                'isPass': true,
                'isShareInAudit': true,
                'opinion': '',
                'orgId': '',
                'orgName': '',
                'userId': '',
                'workId': ''
            },

        }
    },
    components: {
        ComPagination,
    },
    computed: {
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value === param)
                return (obj ?  obj.label :  '')
            }
        },
    },
    created () {
        this.getList()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        ...mapMutations(['setSearchData']),
        //获取列表
        getList () {
            request.leaseList(this.pagination).then(res=>{
                this.tableData = res.list
                this.totalPage = res.totalCount
            })
        },
        //获取流程按钮显示状态
        getCurrentUnitInfo () {
            requestAudit.getCurrentUnitInfo(this.auditParams).then(res => {
                this.auditState = res
            })
        },
        //分页查询
        listByEntity () {
            this.getList()
        },
        //新增
        openAddDialog () {
            this.$router.push('/houseLeasePlanAdd')
        },
        //汇总显示
        showDialog () {
            openAppClient('/houseLeasePlanCollectShow', '汇总显示')
        },
        //查看
        tableDbShow (row) {
            if(row.state === -1 || row.state === 2 || row.state === 5) {
                this.$router.push({
                    path: '/houseLeasePlanShow',
                    query: { billid: row.billId }
                })
            }else{
                this.auditParams.billId = row.billId
                requestAudit.getCurrentUnitInfo(this.auditParams).then(res => {
                    this.auditState = res
                    if( this.auditState.canModify == true) {
                        this.$router.push({
                            path: '/houseLeasePlanEdit',
                            query: { billid: row.billId }
                        })
                    }else{
                        this.$router.push({
                            path: '/houseLeasePlanShow',
                            query: { billid: row.billId }
                        })
                    }
                })
            }

        },
        //去变更页面
        openChangePage (row) {
            if(row.changeState === -1 || row.changeState === 2 || row.changeState === 5) {
                this.$router.push({
                    path: '/houseLeasePlanChangeShow',
                    query: { billid: row.changeBillId }
                })
            }else{
                this.auditParams.billId = row.changeBillId
                this.auditParams.billType = '50121'
                requestAudit.getCurrentUnitInfo(this.auditParams).then(res => {
                    this.auditState = res
                    if( this.auditState.canModify == true) {
                        this.$router.push({
                            path: '/houseLeasePlanChangeEdit',
                            query: { billid: row.changeBillId }
                        })
                    }else{
                        this.$router.push({
                            path: '/houseLeasePlanChangeShow',
                            query: { billid: row.changeBillId }
                        })
                    }
                })
            }
        },
        //模糊搜索
        search () {
            this.getList()
        },
        // 高级搜索关闭
        heightSharchClose () {
            this.dialogVisibleSearch = false
        },
        //清空高级搜索的数据
        clearData () {
            this.pagination = {
                'endTime': '',
                'founderId': '',
                'keyword': '',
                'limit': 10,
                'orgId': '',
                'page': 1,
                'startTime': '',
                'states': []
            }
            this.setSearchData({ equipSearchData: this.pagination })
        },
        heightSharch () {
            advanceSearch('/equipPlanHeightSearch').then(res => {
                this.pagination = res.equipSearchData
                this.getList()
                this.clearData()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep.el-steps--simple{
    background: #eff2f6;
    margin-bottom: 10px;
}
.dialog-footer {
    text-align: right;
}
</style>
